<template>
    <div class="page-container">
        <CustomModal :visible="visible" @onClose="onClose" />
        <div class="page-wrapper" :style="{ height:'560px', backgroundImage:`url(${bgImg})` }">
            <div class="page-content">
                <div class="text-container">
                    <div class="text">成功案例</div>
                    <div class="sub-text" style="margin:36px 0;">1000+项目交付经验，助力企业数字化升级转型 实现降本增效</div>
                    <el-button size="large" color="#335CFF" @click="visible=true">申请体验</el-button>
                </div>
            </div>
        </div>
        <div class="page-wrapper" style="height:auto; background:#F5F7FA;">
            <div class="page-content" style="padding:50px 0;">
                <div class="custom-radio">
                    <div 
                        v-for="item in menuData"
                        :key="item.key"
                        :class="{ 'custom-radio-item':true, 'selected':item.key === menuKey  }"
                        @click="menuKey = item.key"
                    >
                        {{  item.label }}
                    </div>
                </div>
                <!-- 应用列表 -->
                <div class="card-container" style="margin-top:60px; margin-bottom:46px;">               
                    <div 
                        v-if="filterList.length"
                        v-for="item in filterList"
                        :key="item.title"
                        class="card"
                        style="width:calc( 33.3% - 16px );"
                    >
                        <div class="card-image" :style="{ backgroundImage:`url(${ getFullPath(item.coverImagePath)})` }"></div>
                        <div class="card-content">
                            <div class="card-title">{{ item.tittle }}</div>
                            <el-tooltip effect="light" :width="460" :content="item.content">
                                <div class="card-desc" style="height:50px; -webkit-line-clamp:2;">{{ item.content || '还没有填写' }}</div>
                            </el-tooltip>
                            <div style="margin:14px 0;">
                                <div
                                    v-for="item in getTagList(item.label)"
                                    :key="item"
                                    class="tag"
                                >
                                    {{ item }}
                                </div>
                            </div>
                        </div>
                    </div> 
                    <div v-else class="empty-wrapper">
                        <img :src="emptyBg" />
                    </div>                      
                </div>
                <!-- 分页符 -->
                <el-pagination 
                    v-if="filterList.length > 9 "
                    class="custom-pagination"
                    v-model:current-page="pageInfo.currentPage" 
                    v-model:page-size="pageInfo.pageSize"
                    v-model:total="total" 
                    background 
                    layout="prev,pager,next" 
                />
            </div>
        </div>
    </div>
</template>
<script setup>
    import { watch, reactive, ref, onMounted } from 'vue';
    import { getFullPath, getContentList } from '@/api/global.js';
    import CustomModal from '@/components/CustomModal.vue';
    import bgImg from '../../../public/case-bg.png';
    import emptyBg from '../../../public/empty.png';
    const pageInfo = reactive({
        currentPage:1,
        pageSize:9
    });
    const total = ref(0);
    const filterList = ref([]);
    const list = ref([]);
    const menuData = [
        { label:'能源案例', key:'智慧能源' },
        { label:'安防案例', key:'智慧安全' },
        { label:'环境案例', key:'智慧环境'},
        { label:'运维案例', key:'智慧运维' }
    ];
    const visible = ref(false);
    const getTagList = (str)=>{
        if ( !str ) return [];
        return str.split(',').slice(0, 3);
    }
    const onClose = ()=>{
        visible.value = false;
    } 
    const menuKey = ref('智慧能源'); 

    const fetchContentList = ()=>{
        getContentList({ page:pageInfo.currentPage, pageSize:pageInfo.pageSize, contentType:'案例' })
        .then(res=>{
            if ( res.data.code === 200 ) {
                list.value = res.data.data;
                filterList.value = res.data.data;
                total.value = res.data.total;
            }
        })
    }
    watch(menuKey, ()=>{
        pageInfo.currentPage = 1;
        filterList.value = list.value.filter(i=>i.category === menuKey.value);
    })
    watch([pageInfo.currentPage], () => {
        fetchContentList();
    })
    onMounted(()=>{
        fetchContentList();
    })

</script>
<style scoped>
    .custom-radio {
        border-radius:4px;
        background:#fff;
        display:flex;
        align-items:center;
    }
    .custom-radio .custom-radio-item {
        flex:1;
        height:80px;
        line-height:80px;
        text-align:center;
        border-radius:4px;
        color:#99A0AE;
        font-size:16px;
        color:#525866;
        background:transparent;
        /* transition: all 0.5s; */
        cursor: pointer;
        position:relative;
    }
    .custom-radio .custom-radio-item:last-child {
        margin-right:0;
    }
    .custom-radio .custom-radio-item:hover {
        background:#e0e3ee;
    }
    .custom-radio .custom-radio-item.selected {
        background:#335CFF;
        color:#fff;
    }
    .custom-radio .custom-radio-item.selected::after {
        content:'';
        position:absolute;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #335CFF;
        left:50%;
        top:100%;
        transform:translateX(-50%);
    }
    .card-content:hover {
        background-image:url(../../../public/card-hover-bg.png);
    }
    
</style>